<template>
	<view class="ok-code_wrap">
		<view class="form_item">
			<view class="item_title">
				<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/zhanghu.svg"></image>
				<text>OK账号</text>
			</view>
			<view class="item_content">{{userInfo.account}}</view>
		</view>
		<view class="form_item">
			<view class="item_title">
				<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/yaoshi.svg"></image>
				<text>apiKey</text>
			</view>
			<view class="item_content">{{userInfo.apiKey}}</view>
		</view>
		<view class="form_item">
			<view class="item_title">
				<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/password.svg"></image>
				<text>secretKey</text>
			</view>
			<view class="item_content">{{userInfo.secretKey}}</view>
		</view>
		<view class="form_item">
			<view class="item_title">
				<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/password.svg"></image>
				<text>Passphrase</text>
			</view>
			<view class="item_content">{{userInfo.passphrase}}</view>
		</view>
		<!-- <button type="primary" class="form_btn" @click="showDialog = true">解绑</button> -->
		<!-- 以后重写的话使用wx-dialog -->
		<!-- <uni-dialog 
		    :show="showDialog" 
		    title="确认解绑" 
		    content="所有信息都会删除,是否确认解绑？"
		    @cancel="onDialogEvent('cancel')" 
		    @confirm="onDialogEvent('confirm')">
		</uni-dialog> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				showDialog: false
			}
		},
		onReady() {
			this.userInfo= uni.getStorageSync('user_info').okAccount;
		},
		methods: {
			// 对话框事件
			onDialogEvent(param){
				if(param === "cancel"){
					this.showDialog = false
				}else if(param === "confirm"){
					this.removeOkAccount();
				}
			},
			// 解绑
			removeOkAccount(){
				this.$api.removeOkAccount({},res=>{
					if(res.data.type === 'ok'){
						uni.reLaunch({
							url: '/pages/login/index'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.ok-code_wrap{
	height:100vh;
	background-color:#FFFFFF;
	overflow:hidden;
	.form_item{
		position:relative;
		margin-top:40upx;
		.item_title{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height:50upx;
			image{
				width:45upx;
				height:40upx;
				margin:0 20upx 0 40upx;
			}
		}
		.item_content{
			position:relative;
			display: block;
			width:90%;
			height:80upx;
			line-height:80upx;
			margin-left:40upx;
		}
		.item_content:after{
		    content:"";
			position:absolute;
		    bottom:0;
		    left:0;
		    right:0;
		    border-top:1px solid rgba(0,0,0,0.1);
		    -webkit-transform:scaleY(.5);
		    -webkit-transform-origin:0 0;
		}
	}
	
	.form_btn{
		width:90%;
		margin-top:60upx;
		border-radius: 50upx;
		background-color: #E03E4D;
	}
}
</style>
